<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
    <style>
        html,
        body,
        #app {
            height: 100%;

        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        header {
            height: 44px;
            text-align: center;
            line-height: 44px;
            border-bottom: 1px solid #f66;
        }

        footer {
            width: 100%;
            height: 50px;
            border-top: 1px solid #f66;
            position: fixed;
            background-color: #fff;
            left: 0;
            bottom: 0;
            z-index: 9999999;
        }

        footer span {
            float: left;
            width: 25%;
            text-align: center;
            line-height: 50px;
        }

        .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id='app'>
        <header>头部</header>

        <main>
            <!-- 可以将一个组件显示出来 -->
            <!-- <home></home> -->
            <!-- 
                动态组件可以使用一个 component 的内置组件，给该组件添加一个 is 熟悉，该属性
                对应的值就是我们要显示的 组件名称
             -->
            <!-- <component :is="componentId"></component> -->


            <!-- 
                我们可以通过 keep-alive 组件进行缓存组件实例，但是不能直接去使用 keep-alive
                因为如果我们直接使用不做限制，会导致所有的组件全部都会被缓存起来，这样的话我们的 
                开销就会非常大，所以咱们应该只缓存有需要的组件，没有必要缓存的组件就不做缓存
             -->
            <!-- <keep-alive>
                <component :is="componentId"></component>
            </keep-alive> -->


            <!-- 
                include 包含，只有被包含的组件才会被缓存，其余组件都不会被缓存
                include 对应的值是组件中定义的选项 name 的值
             -->
            <!-- <keep-alive include="home,cart">
                <component :is="componentId"></component>
            </keep-alive> -->


            <!-- 
                exclude 排除，使用参数和 include 一样，但是含义刚好相反，被添加的页面组件
                将不会被缓存，其余组件会被缓存、
                max 是用来配置缓存的最大数量
             -->
            <keep-alive :exclude="['home']" :max="10">
                <component :is="componentId"></component>
            </keep-alive>


        </main>

        <footer>
            <span :class="{active: componentId == 'home'}" @click="componentId = 'home'">首页</span>
            <span :class="{active: componentId == 'kind'}" @click="componentId = 'kind'">分类</span>
            <span :class="{active: componentId == 'cart'}" @click="componentId = 'cart'">购物车</span>
            <span :class="{active: componentId == 'user'}" @click="componentId = 'user'">我的</span>
        </footer>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                componentId: 'home'
            }
        },
        methods: {},
        // 缓存组件时的生命周期函数
        activated() {
            // 在首次挂载、
            // 以及每次从缓存中被重新插入的时候调用
        },
        deactivated() {
            // 在从 DOM 上移除、进入缓存
            // 以及组件卸载时调用
        },
        components: {
            home: {
                template: `<h1> 首页 <input /> </h1>`,
                name: 'home'
            },
            kind: {
                template: `<h1> 分类 <input /> </h1>`,
                name: 'kind'
            },
            cart: {
                template: `<h1> 购物车 <input /> </h1>`,
                name: 'cart'
            },
            user: {
                template: `<h1> 我的 <input /> </h1>`,
                name: 'user'
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>